<!-- 张梦莉  2017-11-25 卡片管理-->

<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item label="卡券名称">
                    <el-input v-model.trim="filters.card_name" >
                    </el-input>
                </el-form-item>

                <el-form-item label="">
                    <template>
                        <el-select v-model="filters.card_status" @change="getCardList" placeholder="显示状态">
                            <el-option label="启用状态" value=""></el-option>
                            <el-option label="启用" value="1"></el-option>
                            <el-option label="禁用" value="0"></el-option>
                        </el-select>
                    </template>
                </el-form-item>
              <el-form-item>
                <el-button  v-on:click="getCardList" type="primary" icon="el-icon-search">搜索</el-button>
              </el-form-item>
                <!--<el-form-item>-->
                    <!--<el-button type="primary" v-on:click="getCardList" icon="el-icon-search">查询</el-button>-->
                <!--</el-form-item>-->

              <el-form-item style="float: right;">
                <el-form-item>
                  <el-button type="success" v-on:click="handleRestFilters" icon="el-icon-refresh">重置</el-button>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" v-on:click="handleAdd" icon="el-icon-plus">新增
                  </el-button>
                </el-form-item>
              </el-form-item>
            </el-form>
        </el-col>
        <!--列表-->
        <el-table :data="cardList" highlight-current-row v-loading="listLoading" style="width: 100%;">
            <el-table-column prop="card_name" label="卡片名称" sortable>
            </el-table-column>
            <el-table-column prop="product_num" label="可消费数量" sortable>
            </el-table-column>
            <el-table-column prop="product.product_name" label="绑定商品">
            </el-table-column>
            <el-table-column prop="product_validity" label="时效" :formatter="validityFormatter" sortable>
            </el-table-column>
            <el-table-column prop="created_at" label="添加日期" sortable>
            </el-table-column>
            <el-table-column label="显示状态" width="150">
                <template slot-scope="scope">
                    <el-switch v-if="scope.row.card_status=='1'" v-model="scope.row.card_status==1" :active-value="true" :inactive-value="false" @change="editCardStatus('0',scope.row)"></el-switch>
                    <el-switch v-else="scope.row.card_status=='0'" v-model="scope.row.card_status==1" :active-value="true" :inactive-value="false" @change="editCardStatus('1',scope.row)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="210">
                <template slot-scope="scope">
                    <span class="color-blue pointer" @click="handleEdit(scope.row)">编辑</span>
                    <!--<el-button size="small" type="danger" icon="el-icon-delete" @click="deleteOption(scope.row)">删除</el-button>-->
                </template>
            </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="total, sizes, prev, pager ,next" :page-size="filters.pageSize"
                           @current-change="handleCurrentChange" @size-change="handleSizeChange" :total="total">
            </el-pagination>

        </el-col>

        <!--编辑界面-->
        <el-dialog title="" :visible.sync="editFormVisible" min-width="400" width="30%" :show-close="false">
            <div slot="title" class="dialog-title">编辑卡券</div>
            <el-form :model="editForm" label-width="150px" :rules="editFormRules" ref="editForm">
                <el-form-item label="卡片名称" prop="card_name">
                    <el-input v-model="editForm.card_name" :maxlength="20" placeholder="最长输入20个字符" auto-complete="off" autofocus></el-input>
                </el-form-item>
                <el-form-item label="启用状态" prop="card_status">
                    <el-switch v-model="editForm.card_status" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="可消费数量" prop="product_num">
                    <el-input-number :min="0" v-model="editForm.product_num" :step="1" auto-complete="off"
                                     autofocus></el-input-number>
                </el-form-item>
                <el-form-item label="时效(天)" prop="product_validity">
                    <el-input-number :min="0" v-model="editForm.product_validity" :step="1" auto-complete="off"
                                     autofocus></el-input-number> <span>  (0即长期有效)</span>
                </el-form-item>
                <el-form-item label="商品绑定" prop="product_id">
                    <el-select v-model="editForm.product_id" :filter-method="ProductList" filterable placeholder="请选择">
                        <el-option
                                v-for="item in productList"
                                :key="item.product_id"
                                :label="item.product_name"
                                :value="item.product_id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="editFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="editSubmit" :loading="editLoading">提交</el-button>
            </div>
        </el-dialog>

        <!--新增界面-->
        <el-dialog title="" :visible.sync="addFormVisible" min-width="400" width="30%" :show-close="false">
            <div slot="title" class="dialog-title">新增卡券</div>
            <el-form :model="addForm" label-width="180px" :rules="addFormRules" ref="addForm">
                <el-form-item label="卡片名称" prop="card_name">
                    <el-input v-model="addForm.card_name" :maxlength="20" placeholder="最长输入20个字符" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="启用状态" prop="card_status">
                    <el-switch v-model="addForm.card_status" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="可消费数量" prop="product_num">
                    <el-input-number :min="0" v-model="addForm.product_num" :step="1"
                                     auto-complete="off"></el-input-number>
                </el-form-item>
                <el-form-item label="时效(天)" prop="product_validity">
                    <el-input-number :min="0" v-model="addForm.product_validity" :step="1"
                                     auto-complete="off"></el-input-number>   <span>  (0即长期有效)</span>
                </el-form-item>
                <el-form-item label="商品绑定" prop="product_id">
                    <el-select v-model="addForm.product_id" filterable :filter-method="ProductList" placeholder="请选择">
                        <el-option
                                v-for="item in productList"
                                :key="item.product_id"
                                :label="item.product_name"
                                :value="item.product_id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false; $refs['addForm'].resetFields()">取消</el-button>
                <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
  import {getCardList, editCard, addCard, deleteCard, getProductList} from '../../api/api';

  export default {
    data () {
      return {
        filters: {
          pageSize: 10,
          card_name: '',
          page: 1,
          expand: 'product',
          card_status: ''
        },
        list: [],
        cardList: [], // 卡片集合
        letterOption: [],
        // 商品集合
        productList: [],
        loading: false,
        total: 0,
        listLoading: false,
        editFormVisible: false, // 编辑界面是否显示
        editLoading: false,
        editFormRules: {
          card_name: [
            {type: 'string', required: true, message: '请输入卡片名称', trigger: 'blur'}
          ],
          product_num: [
            {type: 'number', required: true, message: '请输入使用数量', trigger: 'blur'}
          ],
          goods_validity: [
            {type: 'number', required: true, message: '请输入商品时效', trigger: 'blur'}
          ],
          product_id: [
            {type: 'string', required: true, message: '请绑定商品', trigger: 'blur'}
          ]
        },
        // 编辑界面数据
        editForm: {
          card_id: null,
          card_name: '',
          card_status: '',
          product_num: null,
          product_id: '',
          product_validity: null,
          product_image: ''
        },
        addFormVisible: false, // 新增界面是否显示
        addLoading: false,
        addFormRules: {
          card_name: [
            {required: true, message: '请输入卡片名称', trigger: 'blur'}
          ],
          product_num: [
            {type: 'number', required: true, message: '请输入使用数量', trigger: 'blur'}
          ],
          product_validity: [
            {type: 'number', required: true, message: '请输入商品时效', trigger: 'blur'}
          ],
          product_id: [
            {type: 'string', required: true, message: '请绑定商品', trigger: 'blur'}
          ]
        },
        // 新增界面数据
        addForm: {
          card_name: '',
          card_value: '',
          product_num: null,
          product_id: '',
          goods_validity: 0,
          product_image: ''
        },
        timeout: null

      }
    },
    computed: {},
    methods: {
      // 格式化输出时效
      validityFormatter (row, column) {
        return row.product_validity + '天'
      },
      handleCurrentChange (val) {
        this.filters.page = val;
        this.getCardList();
      },
      // 条数改变
      handleSizeChange (size) {
        this.filters.pageSize = size;
        this.getCardList();
      },
      // 重置搜索列表
      handleRestFilters () {
        this.filters = {
          pageSize: 10,
          card_name: '',
          page: 1,
          expand: 'product',
          brand_initial: ''
        };
        this.getCardList()
      },
      // 获取服务器列表
      getCardList () {
        this.listLoading = true;
        getCardList(this.filters).then((res) => {
          this.total = res.totalCount;
          this.cardList = res.data;
          this.listLoading = false;
        });
      },
      // 显示编辑界面
      handleEdit (row) {
        this.editFormVisible = true;
        this.editForm = Object.assign({}, row);
        this.editForm.product_id = this.editForm.product_id.toString()
        this.productList.push(this.editForm.product)
      },
      // 显示新增界面
      handleAdd () {
        this.addFormVisible = true;
      },
      // 编辑
      editSubmit () {
        this.$refs.editForm.validate((valid) => {
          if (valid) {
            this.editLoading = true
            editCard(this.editForm).then((res) => {
              this.editLoading = false
              // NProgress.done();
              if (parseInt(res.status) === 1) {
                this.$message({
                  message: '提交成功',
                  type: 'success'
                })
              } else {
                this.$alert('更改失败', '失败', {type: 'error'})
              }
              this.$refs['editForm'].resetFields()
              this.$refs['editForm'].clearValidate()
              this.productList = []
              this.editFormVisible = false
              this.getCardList()
            })
          }
        })
      },
      // 卡片状态更改
      editCardStatus (status, row) {
        this.editForm = Object.assign({}, row);
        this.editForm.card_status = status;
        this.editLoading = true;
        editCard(this.editForm).then((res) => {
          this.editLoading = false;
          // NProgress.done();
          if (parseInt(res.status) === 1) {
            this.$message({
              message: '更改成功',
              type: 'success'
            });
          } else {
            this.$alert('更改失败', '失败', {type: 'error'});
          }
          this.getCardList();
        });
      },
      // 新增
      addSubmit () {
        this.$refs.addForm.validate((valid) => {
          if (valid) {
              this.addLoading = true;
              addCard(this.addForm).then((res) => {
                this.addLoading = false;
                if (parseInt(res.status) === 1) {
                  this.$message({
                    message: '提交成功',
                    type: 'success'
                  });
                } else {
                  this.$alert('添加失败', '失败', {type: 'error'});
                }
                this.$refs['addForm'].resetFields();
                this.addFormVisible = false;
                this.getCardList();
              });
          }
        });
      },
      deleteOption (row) {
        this.$confirm('确定要删除<' + row.card_name + '>吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteCard(row.card_id).then(res => {
            if (parseInt(res.status) === 1) {
              this.getCardList();
              this.$message({
                message: '删除成功',
                type: 'success'
              });
            } else {
              this.$alert('删除失败', '失败', {type: 'error'});
            }
          })
        })
      },
      ProductList (search) {
        let param = {}
        param.search = search
        getProductList(param).then((res) => {
          this.total = res.totalCount;
          this.productList = res.data;
          this.listLoading = false;
        });
      }
    },
    mounted () {
      this.getCardList();
    },
    watch: {}
  }
</script>
<style rel='stylesheet/sass' lang='sass' scoped=''>
</style>
